<template>
  <transition name="animate__animated animate__bounce" enter-active-class="animate__fadeInUp"
              leave-active-class="animate__fadeOut" appear>
    <div  v-show="$store.state.display" id="minimap"></div>
  </transition>
</template>

<script>
// import * as LiBaiLife from './text100.js';
import mapboxgl from "mapbox-gl";
import store from "../../store/index.js";
import http from "@/utils/request.js";
import * as turf from '@turf/turf';
import 'animate.css';

mapboxgl.accessToken = "pk.eyJ1Ijoid3p5YW5ndXN0IiwiYSI6ImNscDl3a3JjMDAxeDMycXA5eXhoYnp5MW0ifQ.pPP33ps1FwkT96cZT_NDNQ";

export default {
  name: 'MapBoxMini',
  data() {
    return {
      num: 0,
    }
  },
  methods: {
    
  },
  mounted() {
    //在这里读取本地JSON文件
    var data3;
    http.get('/user/map').then(res => {
      // mainCity = res.data.mainCity;
      // Chronology = res.data.Chronology
      data3 = res.data.data3
    })
    const map = new mapboxgl.Map({
      container: "minimap",
      // 从地图盒的核心样式中进行选择，或使用地图盒工作室制作自己的样式
      style: "mapbox://styles/wzyangust/clpcmno2c00ae01p99jd8910q",
      pitch: 20, // 设置倾斜程度
      center: [103.8, 35.4],
      zoom: 2,
    });
    map.on("load", async () => {
      // 向地图添加比例尺, 默认左下角
      map.addControl(new mapboxgl.ScaleControl({ maxWidth: 75, unit: "metric" }));

      // 定义源数据
      let data = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "LineString",
              coordinates: [[104.732, 31.774]],
            },
          },
        ],
      };
      // 处理数据
      // 添加点位
      var startTime = store.state.timeline;
      var currentI = 0;
      for (let i = 0; i < data3.length; i++) {
        if (data3[i][2] == startTime) {
          startTime = 123;
        }
        if (i == 0) {
          for (let j = 1; j <= 20; j++) {
            data.features[0].geometry.coordinates.push([
              data3[i][0] + (Math.random() % 0.02) - 0.01,
              data3[i][1] + (Math.random() % 0.02) - 0.01,
            ]);
            currentI++;
          }
        } else {
          let lon1 = data3[i - 1][0];
          let lon2 = data3[i][0] - data3[i - 1][0];
          let lat1 = data3[i - 1][1];
          let lat2 = data3[i][1] - data3[i - 1][1];
          let distance = turf.distance(
            turf.point([data3[i - 1][0], data3[i - 1][1]]),
            turf.point([data3[i][0], data3[i][1]]),
            { units: "kilometers" }
          );
          let n = parseInt(distance / 2.8);
          for (let j = 1; j <= n; j++) {
            if (j == 1) data.features[0].geometry.coordinates.push([lon1, lat1]);
            else
              data.features[0].geometry.coordinates.push([
                lon1 + (Math.random() % 0.02) - 0.01,
                lat1 + (Math.random() % 0.02) - 0.01,
              ]);
            lon1 += lon2 / n;
            lat1 += lat2 / n;
            currentI++;
          }
        }
      }

      // 设置视口
      // const coordinates = data.features[0].geometry.coordinates;

      map.addSource("trace", { type: "geojson", data: data });
      //这里是读取移动线条的属性
      map.addLayer({
        id: "trace",
        type: "line",
        source: "trace",
        paint: {
          "line-color": "#303030",
          "line-opacity": 0.7,
          "line-width": 2,
        },
      });
      // 动画跑图
      map.getSource("trace").setData(data);
      map.jumpTo({ center: [103.8, 35.4], zoom: 2 });
    });
  }
}
</script>

<style scoped></style>
